<template>
	<view>
		<tn-nav-bar :isBack='true' :backTitle='" "' bottomShadow :alpha="alpha">{{title}}</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="con">
			<tn-sticky :customNavHeight='vuex_custom_bar_height'>
				<view class="sosuo" :style="{background:!alpha?'#fff':''}">
					<image src="/static/shop/sousuo.png" class="sosuo__icon" mode=""></image> <input type="text"
						placeholder="搜索关键词" name="" class="sousuoinp" id="" v-model="keyword" @input="input">
				</view>
			</tn-sticky>
			<loading v-if="loading"></loading>
			<view class="projiectlist" v-else>
				<project-item :item='item' :cardid='cardid' :cardnum='cardnum' v-for="(item,index) in scenelist" :key="index"></project-item>
			</view>
		</view>
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				alpha: true,
				title: '',
				id: '',
				scenelist: [],
				keyword: '',
				cardid:'',
				cardnum:'',
				loading:true,
				
			};
		},
		onLoad(o) {
			// 判断是否为电子卡进入
			if(o.cardid){
				// 是体验路线
				this.cardid=o.cardid
				this.cardnum=o.cardnum
			}
			this.id = o.id
			this.title = o.title
			this.getlist()
		},
		methods: {
			input(e){
				// console.log(e.detail.value)
				this.getlist()
			},
			getlist() {
				this.loading=true
				home.getScene({
					category_id: this.id,
					keyword: this.keyword,
				}).then(res => {
					if (res.data.code == 1) {
						res.data.data.map(t => {
							t.imgs = t.images.split(',').filter(Boolean)
						})
						this.scenelist = res.data.data
						this.loading=false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 30rpx;
		position: relative;

		.projiectlist {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	}

	page {
		background-color: #F7F8F8;
	}

	.sosuo {
		padding: 30rpx 0;
		position: relative;

		&__icon {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 51rpx;
			left: 35rpx;
		}
	}

	.sousuoinp {
		width: 690rpx;
		height: 73rpx;
		background: #FEFEFE;
		border-radius: 37rpx;
		line-height: 73rpx;
		color: #333;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		padding-left: 80rpx;
	}
</style>